// 获取样式——————
// 定义一个函数，用来获取指定元素的当前的样式
// 参数：
//      obj 要获取样式的元素
//      name 要获取的样式名
function getStyle(obj , name){
    if(window.getComputedStyle){
        // 正常浏览器的方式，具有getComputedStyle()方法
        return getComputedStyle(obj , null)[name];
    }else{
        // IE8的方式，没有getComputedStyle()方法
        return obj.currentStyle[name];
    }
    // 也可用三元表达式来进行判断
}

// 简单动画函数————————
// 创建一个简单动画函数
// 参数：
//      obj:要执行动画的对象
//      attr：对象要移动或变形的效果，比如：left top width height
//      target：执行动画的目标位置
//      speed：移动的速度(正数向右移动，负数向左移动)
//      callback：回调函数，这个函数将会在动画执行完毕以以后执行
function move(obj, attr, target, speed, callback) {
    // 连续点击关闭上一个定时器
    clearInterval(obj.timer);

    // 获取元素目前的位置
    var current = parseInt(getStyle(obj, attr));

    // 判断速度的正负值
    // 如果从0向800移动，则speed为正
    // 如果从800向0移动，则speed为负
    if (current > target) {
        speed = -speed;
    }

    // 开启一个定时器
    // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器标识
    obj.timer = setInterval(function () {
        // 获取box1的left值,并提取有效数字
        var oldValue = parseInt(getStyle(obj, attr));

        // 在原来值的基础上增加，实现移动效果
        var newValue = oldValue + speed;

        // 判断newValue是否大于800
        // 从800向 0 移动
        // 向左移动时，需要判断newValue是否小于target
        // 向右移动时，需要判断newValue是否大于target
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }

        // 将新值赋值给样式里的left
        obj.style[attr] = newValue + 'px';

        // 移动到800px的时候自动停止
        if (newValue == target) {
            clearInterval(obj.timer);
            // 动画执行完毕，调用回调函数
            callback && callback();
        }

    }, 30)
}

// 类的操作——————
// 定义一个函数，用来向一个元素中添加指定的class属性值
// 参数：
//      obj ：要添加class属性的元素
//      cn ： 要添加的class名 (要添加的类名)
function addClass(obj, cn) {
    // 检查obj中是否含有cn (这个类名)
    if (!hasClass(obj, cn)) {
        obj.className += ' ' + cn;
    }

}

// 判断一个元素中是否含有指定的class属性值
//   如果有该class，则返回true，没有则返回false
function hasClass(obj, cn) {
    // 判断obj中有没有这个cn(就是class名)
    // 创建一个正则表达式
    var reg = new RegExp('\\b' + cn + '\\b');

    return reg.test(obj.className);

}

// 删除一个元素中的指定的class属性
function removeClass(obj, cn) {
    // 创建一个正则表达式
    var reg = new RegExp('\\b' + cn + '\\b');

    // 删除class
    obj.className = obj.className.replace(reg, '');
}

// toggleClass可以用来切换一个类
//  如果元素中具有该类，则删除
//  如果元素中没有该类，则添加
function toggleClass(obj, cn) {

    // 判断obj中是否含有cn (这个类名)
    if (hasClass(obj, cn)) {
        // 有，则删除
        removeClass(obj, cn);
    } else {
        // 没有，则添加
        addClass(obj, cn);
    }
}

